<template>
  <el-row>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ name: 'dashboard' }">控制台</el-breadcrumb-item>
      <el-breadcrumb-item>下单配置</el-breadcrumb-item>
    </el-breadcrumb>
    <blank />

    <el-form :model="placeOrderTime" ref="placeOrderTime" label-width="100px" class="" @keyup.enter.native="submitForm('placeOrderTime')">

      <el-form-item label="时间跨度" prop="Span" :rules="[
        { required: true, message: '年龄不能为空'},
        { type: 'number', message: '年龄必须为数字值'} ]">
        <el-input v-model.number="placeOrderTime.Span"></el-input>
      </el-form-item>

      <el-form-item label="上午时间" prop="Forenoon" :rules="[
        { required: true, message: '时间描述不能为空'},
        { min: 1, max: 20, message: '长度在 1 到 20 个字符' }]">
        <el-input v-model="placeOrderTime.Forenoon"></el-input>
      </el-form-item>

      <el-form-item label="下午时间" prop="Afternoon" :rules="[
        { required: true, message: '时间描述不能为空'},
        { min: 1, max: 20, message: '长度在 1 到 20 个字符' }]">
        <el-input v-model="placeOrderTime.Afternoon"></el-input>
      </el-form-item>
      
      <el-form-item label="晚上时间" prop="Night" :rules="[
        { required: true, message: '时间描述不能为空'},
        { min: 1, max: 20, message: '长度在 1 到 20 个字符' }]">
        <el-input v-model="placeOrderTime.Night"></el-input>
      </el-form-item>

      <el-form-item label="上午限制" prop="ForenoonLimit" :rules="[
        { required: true, message: '人数限制限制不能为空'},
        { type: 'number', message: '人数限制必须为数字值'} ]">
        <el-input v-model.number="placeOrderTime.ForenoonLimit"></el-input>
      </el-form-item>

      <el-form-item label="下午限制" prop="AfternoonLimit" :rules="[
        { required: true, message: '人数限制不能为空'},
        { type: 'number', message: '人数限制必须为数字值'} ]">
        <el-input v-model.number="placeOrderTime.AfternoonLimit"></el-input>
      </el-form-item>

      <el-form-item label="晚上限制" prop="NightLimit" :rules="[
        { required: true, message: '人数限制不能为空'},
        { type: 'number', message: '人数限制必须为数字值'} ]">
        <el-input v-model.number="placeOrderTime.NightLimit"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button :loading="loadingState" type="primary" @click="submitForm('placeOrderTime')">提交</el-button>
        <el-button @click="resetForm('placeOrderTime')">重置</el-button>
      </el-form-item>
    </el-form>

  </el-row>
</template>

<script>
  import blank from '@/components/Blank'
  import { Message } from 'element-ui'
  import ax, { errhandler } from '@/api/_axios-config'
  import * as apis from '@/api/_api'

  export default {
    data () {
      return {
        placeOrderTime: {},
        loadingState: false
      }
    },
    created: function () {
      ax.get(apis.POT).then(
        response => {
          let data = response.data

          let initPOT = {
            Span: 15,
            Forenoon: '早上8:00',
            Afternoon: '下午17:30',
            Night: '晚上20:00',
            ForenoonLimit: 10,
            AfternoonLimit: 10,
            NightLimit: 10
          }

          if (data.BoolStatus) {
            initPOT = data.Data
          }
          this.placeOrderTime = initPOT
        }
      ).catch(
        err => {
          errhandler(err)
        }
      )
    },
    methods: {
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loadingState = true
            ax.post(apis.POTHANDLE, this.placeOrderTime).then(
              response => {
                let result = response.data
                if (result.BoolStatus) {
                  Message.success('保存成功')
                } else {
                  Message.error(result.Message)
                }
                this.loadingState = false
              }
            ).catch(
                err => {
                  this.loadingState = false
                  errhandler(err)
                }
            )
          } else {
            return false
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      }
    },
    components: { blank }
  }
</script>
